<template>
	<el-tooltip effect="dark" :content="statusInfo" placement="top">
		<span class="implement-btn" :class="btnStatus" @click="handleConfirm">
			<i class="el-icon-success"></i>
		</span>
	</el-tooltip>
</template>

<script>
	export default {
		name: "confirmBtnModule",
		data() {
			return {
				btnStatus: null,
				statusInfo: ""
			}
		},
		props: ["id", "status"],
		watch: {
			status: {
				handler(val) {
					// 0 | 1
					if (val === 1) {
						this.btnStatus = "success";
					} else {
						this.btnStatus = "info";
					}

					this.handleStatusInfo();
				},
				immediate: true
			}
		},
		methods: {
			handleStatusInfo() {
				let status = this.btnStatus === "success" ? "取消实施埋点" : "实施埋点";
				this.statusInfo = status;
				return status;
			},
			// 确认
			handleConfirm() {
				let title = '埋点实施提示';
				let status = this.handleStatusInfo();
				this.$confirm(`确定要${status}吗？`, title, {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(async () => {
					let operateType = this.btnStatus === "success" ? 4 : 3;
					let data = {
						id: this.id,
						operateType
					}
					let res = await this.$eventApi.eventStatusUpdate(data);
					if (res) {
						this.$message({
							type: 'success',
							message: `${status}成功!`
						});
						this.btnStatus = this.btnStatus === "success" ? "info" : "success";
						this.handleStatusInfo();
					}
				}).catch(() => {
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.implement-btn {
		font-size: 18px;
		cursor: pointer;

		&.success {
			color: #01b27a;
		}

		&.info {
			color: #303133;
		}
	}
</style>
